<template>
  <view class="complaint">
    <view class="formData">
      <formData
        :values="values"
        :fields="fields"
        :rules="rules"
        ref="FormData"
        labelPosition="top"
        label-align="left"
      >
        <template v-slot:slot>
          <view class="size"> 图片证据 </view>
          <view class="uUpload">
            <u-upload
              ref="uUpload"
              :action="action"
              :auto-upload="true"
              upload-text=""
              max-count="3"
              @on-success="onSuccess"
			  @on-remove="onRemove"
            >
            </u-upload>
          </view>
        </template>
      </formData>
    </view>
    <view class="button_error" @click="submit">提交</view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import formData from "@/components/form/index";
import api from "../../api/index.js";
export default {
  data() {
    return {
      action: "http://www.dongfayun.com/index.php/api/common/upload", // 演示地址
      values: {
        reason: "",
        content: "",
        images: "",
      },
      fields: [
        {
          label: "投诉原因",
          prop: "reason",
          type: "input",
          labelWidth: "160",
          height: 88,
          placeholder: "请输入投诉原因",
        },
        {
          label: "具体描述",
          prop: "content",
          type: "textarea",
          labelWidth: "160",
          height: 276,
          placeholder: "请输入具体描述",
        },
      ],
      rules: {},
      arr: [],
    };
  },
  components: {
    formData,
  },
  methods: {
    onSuccess(data, val) {
		 let url =data.data.fullurl.split('.com')
      this.arr.push(url[1]);
    },
	onRemove(index){
	   this.arr.splice(index,1)
	},
    submit() {
      let flag = this.$refs.FormData.submit();
      if (flag) {
        this.values.images = this.arr.join(",");
        uni.showLoading({
          title: "加载中",
        });
        setTimeout(() => {
          api.complaint(this.values).then((res) => {
            if (res) {
              uni.showToast({
                title: "提交成功",
                icon: "success",
                duration: 2000,
              });
              this.values = {
                reason: "",
                content: "",
                images: "",
              };
              this.arr = [];
            }
          });
        }, 1000);
      }
    },
  },
  mounted() {},
  watch: {},
  computed: {},
};
</script>

<style scoped lang='scss'>
.complaint {
  padding: 0px 32rpx;
}
.formData {
  width: 100%;
}
.size {
  font-size: 32rpx;
  color: #262727;
}
.uUpload {
  padding: 40rpx 28rpx;
  background: #ffffff;
  margin-top: 20rpx;
  min-height: 276rpx;
  display: flex;
  align-items: center;
}
.button_error {
  width: 686rpx;
  height: 100rpx;
  background: #e24d49;
  border-radius: 10rpx;
  font-size: 32rpx;
  color: #fff;
  margin-top: 94rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<style>
page {
  background: #fafafa;
}
uni-page {
  overflow: hidden;
}
</style>